<script setup lang="ts">
import NoteAreaBox from "@/views/Student/note/component/note-area-box.vue";
import CardNote from "@/components/communal/Card/card-note.vue";
import CourseHead from "@/views/Student/note/Course/component/CourseHead.vue";
import {reactive,ref} from "vue";
import {groupBy} from "es-toolkit"
import {useRequest} from "vue-hooks-plus";
import {postCurriculumGetCurriculumNoteList, postKnowledgeBaseSelectGroup} from "@/apis/student";

let spinning = ref<boolean>(false)
const pagination = reactive<IPageInfo>({
  onChange: (page: number,pageSize:number):any => {
    pagination.pageNum = page || 1
    pagination.pageSize = pageSize || 12
    run()
  },
  pageNum:1,
  pageSize: 10,
  total: 0,
  hideOnSinglePage: true,
  pageSizeOptions:['10', '20', '30', '40']
});
//  获取课程笔记
let curriculumGroupDataList = ref<any>([])
const { data,run,loading } = useRequest(() => postCurriculumGetCurriculumNoteList(),{
  onSuccess:(res) => {
    if(!res.data){
      spinning.value = false
      return
    }
    curriculumGroupDataList.value = groupBy(res.data,(item:any) => item.curriculumType)
    pagination.total = res.data.total
    spinning.value = false
  },
  onError: () => {
    curriculumGroupDataList.value=[]
    spinning.value = false
  },
  onBefore:()=>{
    spinning.value = true
  }
})
</script>

<template>

    <a-card style="height: 100%">
      <a-spin :spinning="spinning">
      <note-area-box  v-for="name in Object.keys(curriculumGroupDataList)" :key="name" :title="name">
        <a-list :grid="{ gutter: 16, column: 7 }" :data-source="curriculumGroupDataList[name]" :pagination="pagination" :loading="loading">
          <template #renderItem="{ item }" :key="item.id">
            <a-list-item>
              <card-note
                  width="120px"
                  height="181px"
                  :title="item.curriculumNoteTitle"
                  :blurb="item.content"
              >
              </card-note>
            </a-list-item>
          </template>
        </a-list>
      </note-area-box>
      </a-spin>
    </a-card>

</template>

<style scoped lang="scss">

</style>
